<template>
<el-card>
  <h1>个人订单</h1>

<!--内容列表开始-->
  <el-table :data="contentArr">
    <el-table-column type="img" label="图片" width="100px"></el-table-column>
    <el-table-column prop="brief" label="商品" width="380px"></el-table-column>
    <el-table-column prop="viewCount" label="价格"></el-table-column>
    <el-table-column prop="commentCount" label="数量"></el-table-column>
    <el-table-column prop="createTime" label="小计" width="100px"></el-table-column>
    <el-table-column label="操作" width="180px" fixed="right">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--内容列表结束-->
</el-card>
</template>

<script setup>
import axios from "axios";
import router from "@/router";
import {ElMessage} from "element-plus";
import { ref } from 'vue';

const contentArr = ref([
  {
    img: 'img.png',
    brief: '商品A',
    viewCount: 100,
    commentCount: 10,
    createTime: '2022-11-01',
  },
  {
    img: 'img.png',
    brief: '商品B',
    viewCount: 200,
    commentCount: 20,
    createTime: '2022-11-02',
  },
  {
    img: 'img.png',
    brief: '商品C',
    viewCount: 300,
    commentCount: 30,
    createTime: '2022-11-03',
  },
]);


const del=(i,c)=>{
  if (confirm("您确认删除此内容吗?")){
    axios.post('http://localhost:8080/v1/contents/'+c.id+'/delete')
        .then((response)=>{
          if (response.data.code==1){
            ElMessage.success("删除成功!");
            let contentArr;
            contentArr.value.splice(i,1);//删除数组里面的数据
          }
        })

  }
}
const update=(c)=>{
  //跳转到发布页面并把内容id传递过去
  router.push('/personal/post?id='+c.id);
}
</script>

<style scoped>

</style>